<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <button @click="increment">Increment: {{ counter }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useMainStore } from '../stores/store'
import { computed } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useMainStore()
    const increment = () => store.increment()
    const counter = computed(() => store.counter)

    return {
      title: 'Hello Vite + Vue 3 + Pinia + SCSS!',
      counter,
      increment
    }
  }
})
</script>

<style scoped lang="scss">
.hello {
  text-align: center;
  padding: 2rem;

  h1 {
    color: $primary-color;
  }

  button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: $primary-color;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
}
</style>
